<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 头部刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 粘性布局 -->
      <van-sticky>
        <!-- 标题 -->
        <van-row
          style="
            height: 40px;
            padding-top: 20px;
            line-height: 40px;
            background-color: #57c4f6;
          ">
          <van-col span="4">
            <!-- 主页提示信息 -->
            <van-icon
              name="bell"
              :badge="this.messagetotal"
              style="font-size: 20px"
              color="#fff"
              @click="jump('about')" />
          </van-col>
          <van-col span="20"> </van-col>
        </van-row>
      </van-sticky>
      <!-- 空白 -->
      <van-row style="height: 20px; background-color: #57c4f6">
        <van-col span="24"> </van-col>
      </van-row>
      <!-- 头像 -->
      <van-row style="height: 150px; background-color: #57c4f6">
        <!-- 头像 -->
        <van-col span="6">
          <van-image
            round
            width="80px"
            height="80px"
            :src="personal.avatar"
            @click="jump('myInfo')" />
        </van-col>
        <!-- 昵称 -->
        <van-col span="6">
          <div style="padding-top: 20px; font-size: 20px; color: #fff">
            <span @click="jump('myInfo')">{{ personal.smallname }}</span>
          </div>
        </van-col>
        <van-col span="12"> </van-col>
      </van-row>
      <!-- 洗车卡 -->
      <van-row @click="jump('vip')">
        <van-col span="2"></van-col>
        <van-col
          span="20"
          style="
            height: 80px;
            margin-top: -40px;
            background-color: #edd7a8;
            border-radius: 10px;
          ">
          <div style="float: left; padding-left: 5%">
            <span></span><br />
            <span style="font-size: 15px; color: #89452f">购买洗车卡</span
            ><br />
            <span style="font-size: 12px; color: #89452f">享受更多优惠</span>
          </div>
          <van-button
            type="default"
            style="
              margin-left: 30%;
              margin-top: 25px;
              border: 0;
              width: 80px;
              height: 30px;
              font-size: 12px;
              background: #874f09;
              color: #fff;
            "
            >立即购买</van-button
          >
        </van-col>
        <van-col span="2"></van-col>
      </van-row>
      <!-- 留白 -->
      <van-row style="height: 20px"><van-col span="24"></van-col></van-row>
      <!-- 常用功能 -->
      <van-row
        type="flex"
        justify="center"
        style="
          margin: auto;
          width: 90%;
          background-color: #fff;
          height: 20px;
          padding: 10px;
          padding-bottom: 0px;
        ">
        <van-col span="6">常用功能</van-col>
        <van-col span="18"></van-col>
      </van-row>
      <van-row
        type="flex"
        justify="space-around"
        style="
          font-size: xx-small;
          margin: auto;
          width: 90%;
          background-color: #fff;
          padding: 10px;
        ">
        <van-col span="4" @click="jumpId('Balance',personal.id)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jifen"></use>
          </svg>
          <!-- <van-icon name="iconfont icon-jifen1" size="40" color="#3ca9b5" /> -->
          <br />
          我的余额
        </van-col>
        <van-col span="4" @click="jumpId('integral',personal.id)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wodejifen"></use>
          </svg>
          <br />
          我的积分
        </van-col>
        <van-col span="4" @click="jump('Mycar')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-cheliang"></use>
          </svg>
          <br />
          我的车辆
        </van-col>
        <van-col span="5" @click="jumpId('MyStores',personal.id)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-xiaomishu2x"></use>
          </svg>
          <br />
          绑定的门店
        </van-col>
        <van-col span="4" @click="Dialog">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-lianxikefu2x"></use>
          </svg>
          <br />
          加盟开店
        </van-col>
      </van-row>

      <!-- 留白 -->
      <van-row style="height: 20px"><van-col span="24"></van-col></van-row>
      <!-- 我的订单 -->
      <van-row
        type="flex"
        justify="center"
        style="
          margin: auto;
          width: 90%;
          background-color: #fff;
          height: 20px;
          padding: 10px;
          padding-bottom: 0px;
        ">
        <van-col span="6">我的订单</van-col>
        <van-col span="12"></van-col>
        <van-col span="6">
          <van-button
            type="default"
            style="
              font-size: small;
              color: #777;
              border: 0px;
              width: 100px;
              height: 30px;
            "
            @click="jump('/myOrder')"
            >查看全部 ></van-button
          >
        </van-col>
      </van-row>
      <van-row
        type="flex"
        justify="space-around"
        style="
          font-size: xx-small;
          margin: auto;
          width: 90%;
          background-color: #fff;
          padding: 10px;
        ">
        <van-col span="4" style="">
          <svg class="icon" aria-hidden="true" @click="jumpOrder('myOrder',1,11)">
            <use xlink:href="#icon-a-daifukuan2x"></use>
          </svg>
          <br />
          待付款
        </van-col>
        <van-col span="4">
          <svg class="icon" aria-hidden="true" @click="jumpOrder('myOrder',2,12)">
            <use xlink:href="#icon-a-wodelipin2x"></use>
          </svg>
          <br />
          待发货
        </van-col>
        <van-col span="4">
          <svg class="icon" aria-hidden="true" @click="jumpOrder('myOrder',3,16)">
            <use xlink:href="#icon-a-daishouhuo2x"></use>
          </svg>
          <br />
          待收货
        </van-col>
        <van-col span="4">
          <svg class="icon" aria-hidden="true" @click="jumpOrder('myOrder',4,5)">
            <use xlink:href="#icon-a-daipingjia2x"></use>
          </svg>
          <br />
          已完成
        </van-col>
        <van-col span="4">
          <svg class="icon" aria-hidden="true"  @click="jumpOrder('myOrder',5,9)">
            <use xlink:href="#icon-a-kehuxiaoshou2x"></use>
          </svg>
          <br />
          取消
        </van-col>
      </van-row>

      <!-- 留白 -->
      <van-row style="height: 20px"><van-col span="24"></van-col></van-row>
      <!-- 必备工具 -->
      <van-row
        type="flex"
        justify="center"
        style="
          margin: auto;
          width: 90%;
          background-color: #fff;
          height: 20px;
          padding: 10px;
          padding-bottom: 0px;
        ">
        <van-col span="6">必备工具</van-col>
        <van-col span="18"></van-col>
      </van-row>
      <van-row
        type="flex"
        justify="space-around"
        style="
          font-size: xx-small;
          margin: auto;
          width: 90%;
          background-color: #fff;
          padding: 10px;
        ">
        <van-col span="5" @click="jump('/WashCarCourse')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <br />
          洗车教程
        </van-col>
        <van-col span="5" @click="jump('/ServiceAgreement')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-xiaoshoudingdan2x"></use>
          </svg>
          <br />
          服务协议
        </van-col>
        <van-col span="5" @click="jump('/Instructions')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-xiaofeijilu2x"></use>
          </svg>
          <br />
          操作指南
        </van-col>
        <van-col span="5" @click="jump('AddressList')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-dizhiguanli2x"></use>
          </svg>
          <br />
          地址管理
        </van-col>
      </van-row>
      <van-row
        type="flex"
        justify="space-around"
        style="
          font-size: xx-small;
          margin: auto;
          width: 90%;
          background-color: #fff;
          padding: 10px;
        ">
        <van-col span="5" @click="jump('/AboutUs')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-icon-guanyu"></use>
          </svg>
          <br />
          关于我们
        </van-col>
        <van-col span="5" @click="jump('/SystemSetting')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
          <br />
          设置
        </van-col>
        <van-col span="5">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-wodeshebei2x"></use>
          </svg>
          <br />
          蓝色水源
        </van-col>
        <van-col span="5"> </van-col>
      </van-row>

      <!-- 底部标签 -->
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o" @click="jump('/')"
          >主页</van-tabbar-item
        >
       <van-tabbar-item
          name="search"
          icon="search"
          @click="jump('nearByStores')"
          >附近门店</van-tabbar-item
        >
        <van-tabbar-item name="friends" icon="cart-o" @click="jump('/store')"
          >商城</van-tabbar-item
        >
        <van-tabbar-item name="setting" icon="user-o" @click="jump('myView')"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </van-pull-refresh>
  </div>
</template>

<script>
// import "@/assets/font_x2q6up6l3e/iconfont.css"
import "@/assets/font_x2q6up6l3e/iconfont.js";
import { Toast } from "vant";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      personal:{},
      isLoading: false, //刷新参数
      active: "setting", //底部标签绑定
      images: [],
      messagetotal: 100, //主页左上角铃铛信息数量
    };
  },
  created() {
    this.loadData();
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    loadData() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get(
          "/tuser/queryBy"
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.personal = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },
    jump(uri) {
      this.$router.push(uri);
    },
     jumpId(uri, id) {
      this.$router.push({ name: uri, query: { id: id } });
    },
     jumpOrder(uri, id,orderCode) {
      this.$router.push({ name: uri, query: { id: this.personal.id,orderCode:orderCode,Aid:id } });
    },
    //（确认、取消）的弹出框
    Dialog() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "12365478911",
          confirmButtonColor: "red",
        })
        .then(() => {
          console.log("点击了确认");
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style>
body {
  background-color: #f8f8f8;
}

.icon {
  width: 40px;
  height: 40px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
